<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载</title>
    <style>
        .box {
            border: 5px solid yellow;
            overflow: auto;
            height: 600px;
        }
        .article {
            color: #008c8c;
            height: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .image-load {
            width: 100%;
            height: 300px;
            border: 1px solid #008c8c;
            margin-bottom: 20px;
        }

        .scrol-con-imag {
            width: 340px;
            height: 300px;
            border: 1px solid #008c8c;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="article">懒加载</p>
        <p class="article">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quam quis ad. Suscipit consectetur
            temporibus culpa sit error, provident dolorum sint voluptate ea quidem, facere deserunt animi perferendis,
            adipisci molestiae expedita in eligendi qui nulla magnam? Repellendus obcaecati asperiores eaque cumque
            tempora. Pariatur porro dolor distinctio corporis odio excepturi a vitae, esse deleniti officiis, illum id.
            Error provident, mollitia quis officiis qui reprehenderit nobis, adipisci amet modi reiciendis sequi
            inventore fuga soluta aliquid explicabo odit temporibus enim consequuntur aliquam? Ducimus ipsa magni
            distinctio quo quam fuga odit tempora! Sequi odit perferendis eius, assumenda soluta ad ipsa vitae officia
            velit libero.
        </p>

        <div class="image-load">
            
        </div>
        <div class="image-load">
            <img class="scrol-con-image"
                data-src=https://image.smoba.qq.com/Picture/HeroOriginalPainting/3015202.jpg>
        </div>
        <img class="scrol-con-image"
                data-src=https://image.smoba.qq.com/Picture/HeroOriginalPainting/3015203.jpg>
    </div>

    <script>
        const box = document.getElementsByClassName('box')[0];
        const imgs = document.querySelectorAll('.scrol-con-image');

        function throttle(fun, delay) {
            let last, timer
            return function(args) {
                let that = this
                let _args = args
                let now = +new Date()

                if(last && now < last + delay) {
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        last = now
                        fun.apply(that, _args)
                    }, delay);
                } else {
                    last = now
                    fun.apply(that, _args);
                }
            }
        }

        function scro() {
            const da = new Date();
            console.log(da.getSeconds());
            imgs.forEach(img => {
                const top = box.getBoundingClientRect().top;
                const imgTop = img.getBoundingClientRect().top;

                if(imgTop - top < box.clientHeight){
                    const src = img.getAttribute('data-src');
                    img.setAttribute('src', src); 
                }
            })
        }

        let throttleScro = throttle(scro, 500)

        box.addEventListener('scroll', ()=>{
            throttleScro();
        });
    </script>
</body>

</html>